<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>KIT ADMIN</title>
    <link rel="stylesheet" href="/statics/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/statics/plugins/font-awesome/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/statics/src/css/app.css" media="all"/>
    <link rel="stylesheet" href="/statics/src/css/themes/default.css" media="all" id="skin" kit-skin/>
    <script src="/statics/plugins/layui/layui.js"></script>
</head>

<body>
<div>
    <form class="layui-form" style="margin-top: 20px">
        <div class="layui-form-item" align="center">
            <label for="customerName" class="layui-form-label">
                <span class="x-red">*</span>客户姓名
            </label>
            <input type="hidden" name="orderId" >
            <div>
                <a class="layui-btn layui-btn-small"
                   style="line-height:1.6em;margin-top:3px;float:right;padding-top: 5px"
                   href="javascript:location.replace(location.href);" title="刷新">刷新
                </a>
            </div>
            <div class="layui-input-inline">
                <input type="text" id="customerName" name="customerName"
                       required="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" align="center">
            <label  class="layui-form-label">
                <span class="x-red">*</span>选择房间
            </label>
            <div class="layui-input-inline">
                    <select class="form-control" name="roomId" id="room">
                    </select>

            </div>
        </div>
        <div class="layui-form-item" align="center">
            <label  class="layui-form-label">
                <span class="x-red">*</span>选择员工
            </label>
            <div class="layui-input-inline">
                <select class="form-control" name="staffId" id="staff">
                </select>

            </div>
        </div>
        <div class="layui-form-item">
            <label for="orderState" class="layui-form-label">
                <span class="x-red">*</span>订单状态
            </label>
            <div class="layui-input-block" style="width: 190px">
                <select name="orderState" lay-filter="orderState" id="orderState">
                    <option value="0" >未结账</option>
                    <option value="1" >已结账</option>
                    <option value="2" >结账未离开</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="orderTable" class="layui-form-label">
                <span class="x-red">*</span>选择服务项目：
            </label>
        </div>
        <table class="layui-hide" id="orderTable"></table>
        <div class="layui-form-item" align="center">
            <button class="layui-btn" lay-filter="add" data-type="getCheckData"  lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer','table'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;
        $(function () {
            getroomid();
            getStaffid();
        });
        function getroomid() {
          //  $("#room").empty();
            $.ajax({
                url: "/room/getroomid",
                type: "GET",
                success: function (result) {
                    //alert(result.data[0].roomId);
                    $.each(result.data,function(){
                        var optionEle = $("<option></option>").append(this.roomName).attr("value",this.roomId);
                        $("#room").append(optionEle);
                    });
                    form.render();//刷新form

                }
            });
        }
        function getStaffid() {
            $.ajax({
                url:"/staff/getStaffId",
                type:"GET",
                success:function (result) {
                    $.each(result.data,function () {
                        var option=$("<option></option>").append(this.staffName).attr("value",this.staffId);
                        $("#staff").append(option);
                    });
                    form.render();
                }
            });
            
        }
        //自定义验证规则
        form.verify({
            gender: function (value) {
                if (value == 1) {
                    return '请选择性别';
                }
            }
            , role: function (value) {
                if (value < 0) {
                    return '请选择角色';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });
        var table = layui.table, form = layui.form;
        table.render({
            elem: '#orderTable',
            url: '/item/getData',
            cellMinWidth: 80,
            cols: [
                [{
                    checkbox: true,
                    fixed: true
                }, {
                    field: 'itemId',
                    title: '项目编号',
                }, {
                    field: 'itemName',
                    title: '项目名称',
                }, {
                    field: 'itemTime',
                    title: '服务时间',
                }, {
                    field: 'itemPrice',
                    title: '服务费用',
                }, {
                    field: 'itemIntro',
                    title: '项目简介',
                }]
            ],
            id: 'reloadId',
            page: true
        });
        var active = {
            reload: function () {
                var s_name = $('#s_name');
                table.reload('reloadId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        itemName: s_name.val(),
                    }
                });
            },
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('reloadId');
                var data = checkStatus.data;

                var jsonData={}
                jsonData.roomId = $('#room').val();
                jsonData.customerName = $('#customerName').val();
                jsonData.items=data;
                jsonData.orderState=$("#orderState").val();
                jsonData.staffId=$('#staff').val();
                console.log(jsonData);
                //search_condition必须和对象中的字段对应
                $.post({
                    dataType: 'json',
                    contentType: 'application/json',
                    url: "/orders/save",
                    data: JSON.stringify(jsonData),
                    success: function (result) {
                        if (result.code == 0) {
                            layer.msg('添加成功', {icon: 1, time: 1000});
                            table.reload('reloadId');
                        } else {
                            layer.msg(result.msg, {icon: 6, time: 1000});
                        }
                    },
                    error: function () {
                        layer.msg('网络繁忙!', {icon: 6, time: 1000});
                    }
                });
            }
        };
        form.on('submit(add)',function (data) {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            return false;
        });

    });


</script>

</body>

</html>